<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* BFC(Box Formatting Context) 块级格式化上下文 */
        /* 是页面的一个隔离容器*/
        /* 里面的子元素不会影响外面的元素,外面的也不影响里面的 */
        /* 一个盒子不设置height,里面子元都浮动时，无法撑起自身  因为盒子没有形成BFC*/
        /* 如何让盒子形成BFC */
            /* ①：float的值不是none 即大盒子浮动  【不靠谱】*/
            /* ②：position的值不是static relative */
            /* ③：display的值是inline-block【不靠谱】 flex inline-flex */
            /* ④：overflow:hidden; 【超好用】*/
        /* overflow:hidden; 表示溢出隐藏，溢出盒子边框的内容将会被隐藏 【好用】*/
        /* BFC的其他作用：①BFC可以取消盒子的塌陷 ②可以阻止元素被浮动元素覆盖【没有实际意义】 */
        /* 盒子里面有浮动，为了防止边框撑不起来，要么大盒子要么设置高度，要么用overflow:hidden把盒子搞成BFC */
        /* 浏览器差异：6、7使用haslayout机制，和BFC略有差异 */
        /* IE浏览器可以使用zoom：1让盒子拥有layout */
        /* 为了兼容IE6、7，实际代码尽量简单，写上高度，不要玩杂耍 */
        .box{
            width: 500px;
            border: 1px solid #000;
            /* 没有设置高度，里面内容浮动 边框撑不起来 */
            /* 方法1：盒子也设置浮动【不靠谱】 */
            /* float:left; */
            /* 方法3：display的值是inline-block【不靠谱】 */
            /* display:inline-block; */
            /* 方法4：overflow:hidden;【好用】 */
            overflow: hidden;
        }
        .b1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .b2{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="b1"></div>
        <div class="b2"></div>
    </div>
</body>
</html>